<template>
  <div id="email">
  	<login-title></login-title>
  	<div class="inner">
  		<h3 class="titles">新用户邮箱绑定</h3>
			<!-- <span class="shuoming">找回密码时，需要进行邮箱验证，请您务必正确填写邮箱地址！</span> -->
			<div class="emails">
					<input class="email"  v-model="email"  placeholder="邮箱" />
			</div>
  		
  		<div class="yzm-group">
  			<input class="yzm" v-model="yzm" placeholder="验证码" />
  			<button  class="btn-sub" @click="getYzm" :disabled="yzmStatus">{{yzmText}}</button>
  		</div>
  		<p class="subYzm" v-if="yzmEmailText">验证码已发送至{{yzmEmailText}}</p>
  		<el-button style='width: 100%;margin-top: 41px;' :disabled="(email && yzm)?false:true" @click="submit" type="primary">提交</el-button>
  	</div>
  </div>
</template>
<script>
	import loginTitle from './view/logoDiv'
  import {addemail,getEmailCode} from '../api/getData'
export default {
  name: 'email',
  data: function () {
    return {
    	email:'',
    	yzm:'',
      yzmToken:"",
      yzmEmailText:"",
    	yzmStatus:false,
    	yzmText:'获取验证码'
    }
  },
  components:{
  	loginTitle
  },
  created: function () {}, // 创建时
  beforeMount: function () {}, // 挂载之前
  mounted: function () {

  }, // 挂载之后
  beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
  updated: function () {}, // 数据更新后,渲染后调用(禁止)
  beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
  destroyed: function () {}, // 实例销毁后调用
  methods: {
    getYzm(){
      let reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
      if(!reg.test(this.email)) {
        this.$message.error("邮箱格式不正确")
      }else{
        getEmailCode({
          "toAddress":this.email
        }).then((data)=>{
          var data = data.data
          console.log('--data--', data)
          if(data.code === 0){
            this.$message({
              message:data.msg,
              type: 'success'
            })
            this.yzmToken = data.data.token
            this.yzmEmailText = this.email
          }
        })
        var s = 60
        clearInterval(timer)
        var timer = setInterval(()=>{
          this.yzmStatus = true
          s--
          this.yzmText = s + 's'
          if(s === 0){
            this.yzmStatus = false
            this.yzmText = '获取验证码'
            s = 0
            clearInterval(timer)
          }

        },1000)

      }


    },
    submit(){
      addemail({
          "code":this.yzm,
          "token":this.yzmToken,
          "mail":this.email
        }).then((data)=>{
          let $data = data.data
          if($data.code === 0){
            this.$message({
              message:"邮箱绑定成功",
              type:"success"
            })
            this.$router.push("/passwordRetrieve")
          }else if($data.code === 1){
            this.$message.error("邮箱绑定失败")
          }
        })
      }

  } // 函数
}
</script>
<style lang='scss' scoped>
  #email{
  	position: relative;
  	width: 100vw;
  	height: 100vh;
  	background:  url(../assets/img/email-bg.jpg) 0 0 no-repeat;
  	background-size: 100% 100%;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	.inner{
  		flex-direction: column;
  		margin-right: 10%;
  		display:flex;

  		.titles{
  			font-size: 18px;
				color: #333437;
				font-weight: normal;
				text-align: center;
				margin-bottom: 40px;
  		}
  		.el-input{

  			.el-input__inner{
  				width: 368px;
  				height: 40px;
  				line-height: 40px;
  				box-sizing: border-box;
  				padding-left: 36px;
  			}
  		}
  		.email{
  			margin: 0 0 24px 0;
				width: 400px;
				padding: 10px 0;
				border: 1px solid #ddd;
				border-radius: 2px;
				text-indent: 30px;
				outline: none;
				background:#fff url(../assets/img/mail_icon.png) 7px center no-repeat;
  		}
  		.yzm{
				width: 250px;
				margin-right: 10px;
				padding: 10px 0;
				border: 1px solid #ddd;
				border-radius: 2px;
				text-indent: 30px;
				outline: none;
				background: #fff url(../assets/img/yzm.png) 6px center no-repeat;
  		}
  		.yzm-group{
  			margin-bottom: 12px;
  			display: flex;
  			justify-content: space-between;
  			.btn-sub{
  				width: 130px;
  				height: 40px;
  				font-size: 14px;
					background: #fff;
					border-radius: 2px;
					color: rgba(0,0,0,0.65);
					text-align: center;
					border: 1px solid #dcdfe6;
  			}
  		}
  		.subYzm{
  			font-size: 12px;
				color: #808492;
				
				span{
					color: #328EF9;
					cursor: pointer;
				}
  		}
			.shuoming{
				font-size: 14px;
				color: #333437;
				margin: 32px 0 12px 0;
			}
			.emails{
				position: relative;
				i{
					position: absolute;
					left: 0;
					top: 0;
					z-index: 999;
					color: #808492;
				}
			}
  	}
  }
</style>
